<template>
  <div class="home-wrap">
    <ul>
      <li :span="2" v-for="(o) in appList" :key="o.id" @click="visitProjectBeforeEvent(o)">
        <el-card :body-style="{ padding: '0px' }">
          <img v-if="o.iconUrl" :src="'/files' + o.iconUrl" class="image" />
          <img v-else src="../../assets/images/yingyong.png" class="image" />
          <div class="app-name">
            <span>{{o.name}}</span>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script>
import api from '@/api/modules/app/index'
import { mapGetters } from 'vuex'

export default {
  name: 'index',
  data() {
    return {
      appList: [],
    }
  },
  computed: {
    ...mapGetters(['token']),
  },
  methods: {
    async getMyProjectList() {
      const res = await api.getMyProjectList()
      this.appList = res.data
    },
    async visitProjectBeforeEvent(e) {
      const res = await api.visitProjectBeforeEvent({ projectId: e.id })
      window.open(`${e.projectUrl}?projectCode=${e.projectCode}&projectId=${e.id}&token=${this.token}`)
    },
  },
  mounted() {
    this.getMyProjectList()
  },
}
</script>

<style lang="scss" rel="stylesheet/scss">
.home-wrap {
  padding: 0px 20px 10px;
  li {
    margin: 20px 10px;
    display: inline-block;
    cursor: pointer;
    .el-card {
      padding: 15px 20px;
    }
    img {
      width: 80px;
      height: 80px;
    }
    .app-name {
      text-align: center;
      padding-top: 10px;
    }
  }
}
</style>
